<template>
	<el-drawer v-model="control.visible" :with-header="false" :direction="control.direction"
		:before-close="public_close">
		<div class="xp-block-banner">
			<div class="xp-title">审核分支设置</div>
			<div class="xp-content">可根据单据的相关属性判断，来确认审核人</div>
		</div>
		<div class="xp-block-conent">
			<el-form ref="form" :model="control.form" :rules="control.rules" label-position="top">
				<el-form-item label="节点名称(仅显示在流程图用)" prop="name" v-if="control.form.logictype!='other'">
					<el-input v-model="control.form.name" autocomplete="off" placeholder="请输入" />
				</el-form-item>
				<el-form-item label="节点判定逻辑" prop="flogicjson" v-if="control.form.logictype!='other'">
					<el-row :gutter="1" v-for="(item, index) in control.form.flogicjson" style="width: 100%">
						<el-col :span="10">
							<el-select v-model="item.fieldId" placeholder="请选择">
								<el-option v-for="item2 in data.typefieldList" :key="item2.id" :label="item2.title"
									:value="item2.id" />
							</el-select>
						</el-col>
						<el-col :span="7">
							<el-select v-model="item.el" placeholder="请选择">
								<el-option v-for="item in data.elList" :key="item.code" :label="item.name"
									:value="item.code" />
							</el-select>
						</el-col>
						<el-col :span="5"><el-input v-model="item.val" autocomplete="off" placeholder="请输入" /></el-col>
						<el-col :span="1"><span class="xp-icon" @click="click_flogicJsonRemove(index)">-</span></el-col>
					</el-row>
					<span class="xp-icon" @click="click_flogicJsonAdd">+</span>
				</el-form-item>

				<el-form-item label="审核人指派" prop="assigneetype">
					<el-select v-model="control.form.assigneetype" placeholder="请选择" style="width: 45%">
						<el-option v-for="item in data.assigneetypeList" :key="item.code" :label="item.name"
							:value="item.code" />
					</el-select>
					<el-select v-model="control.form.assigneetype_user_id" placeholder="请选择" style="width: 45%"
						v-if="control.form.assigneetype=='user'">
						<el-option v-for="item in data.userList" :key="item.id" :label="item.nickname"
							:value="item.id" />
					</el-select>
					<el-select v-model="control.form.assigneetype_role_id" placeholder="请选择" style="width: 45%"
						v-if="control.form.assigneetype=='role'">
						<el-option v-for="item in data.roleList" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="审核通过后的状态" prop="pass_typefstatus_id">
					<el-select v-model="control.form.pass_typefstatus_id" placeholder="请选择" style="width: 100%">
						<el-option v-for="item in data.data.fstatusList" :key="item.id" :label="item.name"
							:value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="审核退回的状态" prop="rejecttype">
					<el-select v-model="control.form.rejecttype" placeholder="请选择" style="width: 45%">
						<el-option v-for="item in data.rejecttypeList" :key="item.code" :label="item.name"
							:value="item.code" />
					</el-select>
					<el-select v-model="control.form.rejecttype_to_typefstatus_id" placeholder="请选择" style="width: 45%"
						v-if="control.form.rejecttype=='to'">
						<el-option v-for="item in data.data.fstatusList" :key="item.id" :label="item.name"
							:value="item.id" />
					</el-select>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<div style="flex: auto">
				<el-button @click="public_close">取消</el-button>
				<el-button type="primary" @click="control_submit">保存</el-button>
			</div>
		</template>
	</el-drawer>
</template>
<script>
	import config from "@/config/config.js";
	import xcHttpUtils from '@/library/xcore/js/XcHttpUtils.js';
	import xcViewUtils from '@/library/xcore/js/XcViewUtils.js';
	import {
		xsStringUtils,
		xsDateUtils,
		xsArrayUtils
	} from 'xstack-for-javascript';

	export default {
		props: {
			modelValue: {
				type: Object,
				default: []
			},
			data: {
				type: Object,
				default: {}
			},
		},
		watch: {
			'data': {
				handler(newVal, oldVal) {
					let that = this;
				},
			},
		},
		data() {
			return {
				config: config,
				xsStringUtils: xsStringUtils,
				xsDateUtils: xsDateUtils,
				sp: {
					clickFlogicId: null,
					clickFlogicIndex: null,
					callbackFunc: null,
				},
				sr: {},
				control: {
					visible: false,
					direction: 'rtl',
					form: {
						id: null,
						flowfstatus_id: null,
						name: null,
						// [{"fieldid": 392, "el": "=", "val": "x"}]
						flogicjson: null,
						logictype: null,
						logictype_fieldsjson: null,
						pass_typefstatus_id: null,
						rejecttype: null,
						rejecttype_to_typefstatus_id: null,
						assigneetype: null,
						assigneetype_user_id: null,
						assigneetype_role_id: null,
						assigneetype_field: null,
						assigneetype_logic: null,
						fieldjson: null,
					},
					rules: {
						name: {
							required: true,
						},
						assigneetype: {
							required: true,
						},
						rejecttype: {
							required: true,
						},
						pass_typefstatus_id: {
							required: true,
						},
						flogicjson: {
							required: true,
						}
					},
				},
			}
		},
		created() {
			let that = this;
			that.xinit();
		},
		methods: {
			xinit() {
				let that = this;
			},
			public_show(clickFlogicId, callbackFunc) {
				let that = this;
				that.control.visible = true;
				that.sp.clickFlogicId = clickFlogicId;
				that.sp.callbackFunc = callbackFunc;

				that.sp.clickFlogicIndex = xsArrayUtils.indexOfByObjectKey(that.data.data.flogicList, 'id', clickFlogicId);
				xcHttpUtils.row2form(that.data.data.flogicList[that.sp.clickFlogicIndex], that.control.form);
			},
			public_reset() {
				let that = this;
				that.public_show();
			},
			public_close() {
				let that = this;
				that.control.visible = false;
			},
			control_submit() {
				let that = this;
				that.$refs.form.validate().then(res => {
					for (let key in that.control.form) {
						that.data.data.flogicList[that.sp.clickFlogicIndex][key] = that.control.form[key];
					}
					that.public_close();
					that.sp.callbackFunc();
				});
			},
			click_flogicJsonRemove(index) {
				let that = this;
				xsArrayUtils.remove(that.control.form.flogicjson, index, 1);
			},
			click_flogicJsonAdd() {
				let that = this;
				that.control.form.flogicjson.push([]);
			},
		}
	}
</script>

<style lang="scss">
	.xp-block-banner {
		padding: $uni-spacing-col-base;
		background-color: $uni-color-warning;
		height: 160px;
		width: 100%;
		color: #FFFFFF;
		text-align: center;

		.xp-title {
			padding-top: 40px;

			font-size: $uni-font-size-subtitle;
		}

		.xp-content {
			font-size: $uni-font-size-base;
			padding: $uni-spacing-col-lg;

		}
	}

	.xp-block-conent {
		padding: $uni-img-size-sm;

		.xp-flogic-tabs>.el-tabs__content {
			padding: 32px;
			color: #6b778c;
			font-size: 32px;
			font-weight: 600;
		}

		.xp-flogic-tabs .custom-tabs-label .el-icon {
			vertical-align: middle;
		}

		.xp-flogic-tabs .custom-tabs-label span {
			vertical-align: middle;
			margin-left: 4px;
		}
	}

	.xp-icon {
		display: block;
		margin-top: 5px;
		margin-left: 5px;
		font-size: 15px;
		font-weight: 100;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		width: 20px !important;
		height: 20px !important;
		border: 2px dotted #dcdfe6;
		border-radius: 50%;
		transition: background-color 0.3s;

	}

	.xp-icon:hover {
		background-color: #dcdfe6;
		/* 鼠标悬停时的背景颜色 */
	}
</style>